<template>
	<view class="page">
		<view class="segment_wrap">
			<view class="segment">
				<view class="selector" style="justify-content: flex-start;">
					<view style="margin-left: 32rpx;">教案列表</view>
				</view>
				<view class="selector" style="color: #58c866; justify-content: flex-end;" @click="showDocTime = true;">
					<view>{{filtrate}}</view>
					<view class="icon" style="margin-right: 32rpx;">
						<u-icon name="arrow-down-fill" :color="highlight1" size="12"></u-icon>
					</view>
				</view>
			</view>
		</view>


		<view class="content">
			<u-checkbox-group v-model="checkboxValue1" placement="column" :iconSize="21">
				<view v-for="(item, idx) in list">

					<view class="cell">
						<view class="icon-word-mask word"></view>
						<view class="icon-course-mask mask">
							<view style="text-align: center; color: #FFFFFF; font-size: 24rpx;">小班</view>
						</view>
						<u-checkbox activeColor="#58C866" :name="item.id" :key="row"
							@change="handleChange(item.id)"></u-checkbox>
						<view style="margin-left: 28rpx; flex: 1;">
							<view class="title">
								{{item.name}}
							</view>
							<view class="sub">领域:
								{{item.name}}
							</view>
						</view>
						<view class="time">{{item.time}}</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>

		<!-- 页脚 -->
		<view class="footer">
			<view class="container">
				<u-checkbox-group placement="column" :iconSize="21">
					<u-checkbox activeColor="#58C866" :checked="isallcheck" @change="checkboxChange"
						label="全选"></u-checkbox>
				</u-checkbox-group>
				<view class="btn bg" @click="onClicked">下载</view>
			</view>
		</view>
		<!-- 选择文档类型 -->
		<view class="popup">
			<u-picker :show="showDocType" :columns="docTypes" keyName="name" title="文档类别" cancelColor="#3A3D4B"
				confirmColor="#58C866" @confirm="docTypeSelect" @cancel="showDocType = false"></u-picker>
		</view>

		<view class="popup">
			<!-- 选择评价的学期时间 -->
			<u-popup :show="showDocTime" :safeAreaInsetBottom="false" mode="top">
				<view style="padding: 10rpx 48rpx;">
					<view class="mt30 f32 bold">教案领域</view>
					<view class=""
						style=" display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px; padding: 24rpx 0rpx;">
						<!-- :class="{item:selectindex==index,no_item:selectindex!=index}" @click="selectItem(index)" -->
						<view class="radiobtn" :class="{height:selectindex==0,normal:selectindex!=0}"
							@click="selectItem(0)">
							<span class="">全部</span>
						</view>
						<view class="radiobtn" :class="{height:selectindex==1,normal:selectindex!=1}"
							@click="selectItem(1)">科学
						</view>
						<view class="radiobtn" :class="{height:selectindex==2,normal:selectindex!=2}"
							@click="selectItem(2)">艺术
						</view>
						<view class="radiobtn" :class="{height:selectindex==3,normal:selectindex!=3}"
							@click="selectItem(3)">语言
						</view>
						<view class="radiobtn" :class="{height:selectindex==4,normal:selectindex!=4}"
							@click="selectItem(4)">社会
						</view>
						<view class="radiobtn" :class="{height:selectindex==5,normal:selectindex!=5}"
							@click="selectItem(5)">健康
						</view>
					</view>
					<view class="mt30 f32 bold">选择年龄段</view>
					<view class=""
						style=" display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px; padding: 24rpx 0rpx;">
						<view class="radiobtn" :class="{height:selectAgeindex==0,normal:selectAgeindex!=0}"
							@click="selectAgeItem(0)">
							<span class="">全部</span>
						</view>
						<view class="radiobtn" :class="{height:selectAgeindex==1,normal:selectAgeindex!=1}"
							@click="selectAgeItem(1)">托班
						</view>
						<view class="radiobtn" :class="{height:selectAgeindex==2,normal:selectAgeindex!=2}"
							@click="selectAgeItem(2)">小班
						</view>
						<view class="radiobtn" :class="{height:selectAgeindex==3,normal:selectAgeindex!=3}"
							@click="selectAgeItem(3)">中班
						</view>
						<view class="radiobtn" :class="{height:selectAgeindex==4,normal:selectAgeindex!=4}"
							@click="selectAgeItem(4)">大班
						</view>
					</view>
					<view class="mt30 f32 bold">选择时间范围</view>
					<view class=""
						style=" display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px; padding: 24rpx 0rpx;">
						<view class="radiobtn" :class="{height:selectTimeindex==0,normal:selectTimeindex!=0}"
							@click="selectTimeItem(0)">
							<span class="">不限时间</span>
						</view>
						<view class="radiobtn" :class="{height:selectTimeindex==1,normal:selectTimeindex!=1}"
							@click="selectTimeItem(1)">自定义
						</view>
					</view>
					<view style="display: flex;width: 100%;" v-if="selectTimeindex===1">
						<view style="width: 100%; ">
							<picker-view indicator-style="height: 50px;" v-model="dayday" @change="bindStartDate"
								class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
						<view style="display: flex; justify-content: center; align-items: center; margin: 0rpx 30rpx;">至
						</view>
						<view style="width: 100%;">
							<picker-view indicator-style="height: 50px;" :value="value" @change="bindEndDate"
								class="picker-view">
								<picker-view-column>
									<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
				</view>
				<view style="height: 1rpx; width: 100%; background-color: #EBECED; margin-top: 40rpx;"></view>
				<view class="picker-btn">
					<view class="btn restart" @click="showDocTime = false">重置</view>
					<view class="btn confirm" @click="pickerChange">确定</view>
				</view>
			</u-popup>
		</view>
		<!-- load -->
		<rf-load :loading="loading"></rf-load>
		<!-- 下载复制 -->
		<rf-downloadTips :show="downloadTipsShow" :desc="downloadUrl"
			@confirm="downloadTipsShow = false"></rf-downloadTips>
		<rf-toast :show="toastShow" @click="toastShow = false" :isSus="false" des="请选择开始与结束时间"></rf-toast>
	</view>
</template>

<script>
	import toast from "../../uni_modules/uview-ui/libs/config/props/toast"
	import {
		getCouresList,
		getMyDocList,
		downloadDoc,
	} from "@/api/coures.js"

	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}

			return {

				years,
				months,
				days,

				year,
				month,
				day,

				value: [years.length, month - 1, day - 1], // 设置默认值，分别是年的索引，月的索引，日的索引
				dayday: [years.length, month - 1], // 设置默认值，分别是年的索引，月的索引，日的索引


				showDocType: false, // 选择文档类型
				showDocTypeTitle: "文档类别",

				docTypes: [
					[{
						'name': '全部',
						'value': "0",
					}, {
						'name': '观察记录',
						'value': "1",
					}, {
						'name': '学期评价',
						'value': "2",
					}]
				],

				showDocTime: false,
				filtrate: "筛选",

				params: {
					type: 0,
					startTime: "",
					endTime: "",
				},

				// 恢复默认时间
				startTime: "",
				endTime: "",

				data: [],
				// indexList: ["A", "B", "C"],


				isallcheck: false, // 是否全选
				checkboxValue1: [], // 所有被选择的文件ID
				slChilds: [], // 被选择的孩子ID
				slFiles: [], // 被选中文档

				loading: false,
				downloadTipsShow: false, // 显示下载链接
				downloadUrl: "", // 下载链接
				toastShow: false,
				list: [{
					'id': '312',
					'name': '学期评价',
					'value': "2",
					'time': "2024-12-30",
				}, {
					'id': '123',
					'name': '学期评价',
					'value': "2",
					'time': "2024-12-30",
				}],
				selectindex: 0,
				selectAgeindex: 0,
				selectTimeindex: 0,

			}
		},
		computed: {
			indexList() {
				return new Array(26).fill("A").map((char, index) => String.fromCharCode(65 + index));
			}
		},
		watch: {

			downloadTipsShow(val) {
				if (val) {
					this.loading = false
				}
			},
			toastShow(val) {
				if (val) {
					this.loading = false
					this.showDocType = false
					this.showDocTime = false
				}
			}
		},
		onLoad() {

			this.getdocList()

			// this.params.startTime = ""
			// this.params.endTime = ""
		},
		methods: {
			selectItem(e) {
				this.selectindex = e
			},
			selectAgeItem(e) {
				this.selectAgeindex = e
			},
			selectTimeItem(e) {
				this.selectTimeindex = e
			},
			getdocList() {
				this.loading = true
				getMyDocList(this.params).then(res => {
					this.loading = false
					this.data = res.data;
					console.log("res----------------" + JSON.stringify(res));
				}).catch(err => {
					this.loading = false
				})
			},
			onClickedDocTime() {
				this.startTime = this.params.startTime;
				this.endTime = this.params.endTime;

				// 不限时间范围
				this.params.startTime = "";
				this.params.endTime = "";
				this.showDocTimeTitle = "不限时间";
				this.showDocTime = false;

				this.getdocList()
				// 重新设置默认时间
				this.params.startTime = this.startTime
				this.params.endTime = this.endTime
			},
			docTypeSelect(e) {
				this.showDocType = false;
				this.showDocTypeTitle = e.value[0].name;
				this.params.type = e.value[0].value;
				this.getdocList()
				// 根据选择年龄，重新设置 生日默认值
				// const currentDate = new Date();
				// const previousMonth = new Date(currentDate.getTime() - (this.form.childAge * 365 * 24 * 60 * 60 *
				// 	1000));
				// const timeFormat = uni.$u.timeFormat;
				// let timeValue = timeFormat(previousMonth, 'yyyy-mm-dd');
				// this.form.beBornDt = timeValue
			},

			pickerChange() {
				console.log(this.value);
				console.log(this.dayday);
				var date = new Date()
				if (this.params.startTime.length <= 0) {
					this.params.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-01"
					this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1)
				}
				if (this.params.endTime.length <= 0) {
					this.params.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-31"
					this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1)
				}
				// this.params.startTime = this.year + "-" + this.month
				// this.params.endTime = this.year + "-" + this.month
				this.showDocTimeTitle = this.startTime + "至" + this.endTime

				this.showDocTime = false;
				this.getdocList()
				// this.startAndendDate = this.form.startTime + "至" + this.form.endTime
			},
			bindStartDate: function(e) {

				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				// this.day = this.days[val[2]]
				// this.params.startTime = this.year + "-" + this.month + "-" + this.day
				this.params.startTime = this.year + "-" + this.month + "-01"
				this.startTime = this.year + "-" + this.month

			},
			bindEndDate: function(e) {

				const val = e.detail.value

				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				// this.day = this.days[val[2]]
				this.params.endTime = this.year + "-" + this.month + "-31"
				this.endTime = this.year + "-" + this.month
			},
			handleChange(val) {
				let that = this;


				// val 孩子ID
				console.log(JSON.stringify(val));
				var index = this.slFiles.indexOf(val);
				if (index !== -1) {
					// 存在
					this.slFiles.splice(index, 1);
				} else {
					// 不存在
					this.slFiles.push(val);
				}

				this.checkboxValue1.length = 0


				that.slFiles.forEach(itemid => {
					that.list.forEach(obj => {
						if (obj.id === Number(itemid)) {
							that.checkboxValue1.push(doc.id);
						}
					});
				});


			},
			checkboxChange() {
				this.isallcheck = !this.isallcheck;

				if (this.isallcheck) {
					this.list.forEach(item => {
						this.checkboxValue1.push(item.id);
					});

					this.checkboxValue1 = [...new Set(this.checkboxValue1)];

					this.list.forEach(item => {
						this.slFiles.push(item.id);
					});

					this.slFiles = [...new Set(this.slFiles)];
				} else {
					this.checkboxValue1.length = 0
					this.slFiles.length = 0
				}
			},
			onClicked() {
				// 下载
				console.log("this.checkboxChange1: " + JSON.stringify(this.checkboxValue1));
				if (this.slChilds.length <= 0) {
					return
				}

				this.loading = true;
				this.params["childList"] = this.slChilds

				var param = {}
				param["childList"] = this.slChilds
				param["type"] = this.params.type
				param["startTime"] = this.params.startTime
				param["endTime"] = this.params.endTime
				// console.log("-----------------" + JSON.stringify(param));

				downloadDoc(param).then(res => {
					this.loading = false;
					if (res.code === 200) {
						this.downloadUrl = res.data
						this.downloadTipsShow = true
						console.log(JSON.stringify(res));
					}
				})

			},
			// 下载文件
			oneClickDownload(url) {


				// 下载文件资源到本地
				uni.downloadFile({
					url: url, // 后端返回的线上文件路径
					success: function(res) {
						console.log(JSON.stringify(res));
						if (res.statusCode === 200) {
							// 文件到本地
							uni.saveFile({
								tempFilePath: res.tempFilePath, //临时路径
								success: function(data) {
									console.log(JSON.stringify(data));
									var savedFilePath = data.savedFilePath
									// 在app端执行

									// #ifdef APP-PLUS
									let osname = plus.os.name
									// 如果是安卓的话弹出提示
									if (osname == 'Android') {
										uni.showToast({
											icon: 'none',
											mask: true,
											title: '保存成功',
											duration: 1000
										})
									}
									// #endif
									//ios手机直接打开文件，手动存储文件到手机，Android手机从根目录创建文件夹，保存文件并改名
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: data.savedFilePath,
											success: function(ress) {
												console.log("成功打开文件")
											},
											fail() {
												console.log("打开文件失败")
											}
										})
									}, 1000)
								}
							})
							console.log('下载成功');
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					},
					complete: function(res) {
						console.log(res.statusCode);
					},
					progress: function(res) {
						console.log('下载进度' + res.progress);
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #F5F6FA;
		height: 100vh;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.segment_wrap {
		height: 76rpx;
		position: relative;

		.segment {
			width: 100%;
			height: 76rpx;
			background-color: white;
			display: flex;
			// color: green;
			position: fixed;
			// top: 96rpx;
			z-index: 999;


			.selector {
				flex: 1;

				display: flex;
				align-items: center;



				.icon {
					margin-left: 10rpx;
				}
			}

		}
	}

	.content {
		margin-bottom: 180rpx;
		padding-top: 20rpx;

		.cell {
			margin: 20rpx 32rpx;
			background-color: #ffffff;
			height: 138rpx;
			border-radius: 8rpx;
			padding: 10rpx 28rpx;
			display: flex;
			align-items: center;
			position: relative;

			.mask {
				width: 96rpx;
				height: 48rpx;
				position: absolute;
				top: -8rpx;
				right: 32rpx;
				z-index: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.word {
				width: 138rpx;
				height: 138rpx;
				position: absolute;
				bottom: -30rpx;
				right: 0;
				z-index: 1;
			}

			.title {
				height: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #3A3D4B;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}

			.sub {
				height: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #6A707B;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}

			.time {
				height: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #99A1AF;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}
		}

	}

	.footer {
		position: fixed;
		z-index: 999;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 180rpx;
		background: #fff;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.02), 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.02);


		.container {
			top: 0rpx;
			height: 112rpx;
			padding: 0rpx 32rpx;
			display: flex;
			align-items: center;

			.btn {
				margin-left: 28rpx;
				width: 94%;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 600;
				line-height: 88rpx;
				text-align: center;
				border: 1rpx solid #58c866;
				color: #FFF;
				background: #58c866;
			}
		}
	}

	.popup {
		// position: relative;

		.u-popup__content {
			// position: relative;
			// border-radius: 24rpx 24rpx 0 0;
			// overflow: hidden;
			padding-bottom: 0rpx;

		}

		.radiobtn {
			// width: 120rpx;
			height: 64rpx;
			border-radius: 32rpx;
			margin: 10rpx 0rpx;
			// border: 2rpx solid #58C866;
			display: flex;
			justify-content: center;
			align-items: center;


			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;

			line-height: 40rpx;
			font-style: normal;

			&.height {
				border: 2rpx solid #58C866;
				color: #58C866;
			}

			&.normal {
				background-color: #F2F3F7;
				color: #3A3D4B;
			}
		}

		// .u-picker__view {
		// 	height: 360rpx !important;
		// }


		.u-toolbar__wrapper__cancel {
			padding: 0;
			position: absolute;
			left: 100rpx;
			bottom: -78rpx;

			width: 200rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.u-toolbar__wrapper__confirm {
			padding: 0;
			position: absolute;
			right: 100rpx;
			bottom: -78rpx;

			width: 200rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}



	.picker-view {
		width: 100%;
		height: 200rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.picker-btn {
		display: flex;
		margin-top: 40rpx;
		margin: 40rpx 48rpx;

		.btn {
			flex: 1;
			height: 72rpx;
			border-radius: 36rpx;
			text-align: center;
			line-height: 72rpx;


			&.restart {
				background: #F2F3F7;
				color: #3A3D4B;
			}

			&.confirm {
				margin-left: 40rpx;
				background: #58C866;
				color: #fff;
			}

		}


	}
</style>